<template>
    <div class="chat-panel">
        <div class="header">
            <div class="title">{{targetUser.remark}}({{targetUser.user.name}})</div>
        </div>
        <!-- 消息主体 -->
        <div class="main scroll-bar-v" ref="chatMain">
            <message-com v-for="msg in targetUser.msgList" :key="msg.sendTime" :msg="msg" />
        </div>
        <!-- 消息发送框 -->
        <div class="input">
            <chat-input-box @onMsg="onSendMessage" />
        </div>
    </div>
</template>
<script lang="ts">
import {Vue,Component,Prop} from 'vue-property-decorator'
import ChatInputBox  from './ChatInputBox.vue'
import MessageCom from './MessageCom.vue'
import axios from 'axios'
import {MsgType,bus} from '../conf'

@Component({
    components:{
        ChatInputBox,MessageCom
    }
})
export default class ChatPanel extends Vue {

    $message: any
    $notify: any
    $store: any

    // 当前选择的联系人(friend对象)
    @Prop({default: {}, type:Object, required: true})
    public targetUser: any

    mounted() {
        this.scrollPanelToEnd()
    }

    // 更新完成后使，滚动条滚动到最底部
    updated() {
        this.scrollPanelToEnd()
    }

    // 滚动消息视图到底部
    private scrollPanelToEnd(){
        const chatMainEl = this.$refs.chatMain as HTMLElement
        this.$nextTick(()=>{
                chatMainEl.scrollTo({
                top: chatMainEl.scrollHeight + 1000
            })
        })
    }

    // 发送消息
    public onSendMessage(type:number, content:string | File){
        switch(type){
            // 发送文本消息
            case MsgType.MSG_TYPE_TEXT:
                this.sendTextMsg(this.targetUser.user.email, content as string)
                break
            // 发送图片消息
            case MsgType.MSG_TYPE_PIC:
                this.sendPicMsg(this.targetUser.user.email, content as File)
                break
            // 其他消息
            default:
                this.sendFileMsg(this.targetUser.user.email, content as File)
                break
        }

    }

    // 发送文本消息
    private sendTextMsg(targetEmail: string, content:string){
        axios.post(`/api/v1/msg/send/text?email=${targetEmail}&content=${content}`)
            .then(res=>{
                this.handleAfterMsgSend(targetEmail, res.data)
            })
            .catch(err=>{
                this.$message.error('消息发送失败:' + err)
            })
    }

    // 发送图片消息
    private sendPicMsg(targetEmail: string, content:File){
        const formData = new FormData()
        formData.append('email', targetEmail)
        formData.append('image', content)
        axios.post('/api/v1/msg/send/img', formData)
            .then(res=>{
               this.handleAfterMsgSend(targetEmail, res.data)
            })
            .catch(err=>{
                this.$message.error('消息发送失败:' + err)
            })
    }

    // 发送文件消息
    private sendFileMsg(targetEmail: string, content:File){
        const formData = new FormData()
        formData.append('email', targetEmail)
        formData.append('file', content)
        axios.post('/api/v1/msg/send/file', formData)
            .then(res=>{
               this.handleAfterMsgSend(targetEmail, res.data)
            })
            .catch(err=>{
                this.$message.error('消息发送失败:' + err)
            })
    }

    // 处消息发送完毕的结果
    private handleAfterMsgSend(email:string, data:any){
        if(data.code===200) return;
        switch(data.code){
            // 已经非好友
            case 601:
                this.deleteFriendInfo(email)
                bus.$emit('resetPanel')
                break
        }
        this.$message.error('消息发送失败:' + data.msg)
    }

    // 删除好友相关信息和聊天记录
    private deleteFriendInfo(email:string){
        // 从最近联系列表中删除
        const recentMsgList:any[] = this.$store.state.recentMsgList
        let index = recentMsgList.findIndex(msg=> msg.showUser.email===email)
        if(index >= 0){
            recentMsgList.splice(index,1)
        }
        // 从好友列表中删除
        const friends:any[] = this.$store.state.friends
        index = friends.findIndex(f=>f.user.email===email)
        if(index >= 0){
            friends.splice(index,1)
        }
    }


    // 当前登录的用户信息
    get userInfo(){
        return this.$store.state.user
    }

}
</script>

<style lang="less">
@import '../css/index.less';

.chat-panel{
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F5F5F5;

    .header{
        padding: 10px;
        border-bottom: 1px solid #efefef;
    }
    .main{
        flex: 1;
        overflow-y: auto;
    }
}    
</style>